<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/css/notification.css">
    <script type="text/javascript" src="/js/pages/notification.js"></script>
    <script>
        $('.selectpicker').selectpicker();
    </script>
  </head>
  <body>
    <!-- notification section start -->
    <div id="edgex-foundry-support-notification">
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Notification</h3>
        </div>
        <div class="panel panel-default" style="border:none;outline:none;margin:0;">
          <div class="panel-heading" style="padding:5px 2px;">
            <!-- <div class="edgexIconBtn">
              <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true" onclick="orgEdgexFoundry.supportNotification.addNotificationBtn()"></i>
            </div> -->
            <form class="form-inline">
              &nbsp;&nbsp; from &nbsp;<input name="notification_start_time" type="text" class="form-control" >
              &nbsp;&nbsp; to &nbsp;<input name="notification_end_time" type="text" class="form-control">
              &nbsp;&nbsp; limit&nbsp; <select name="notification_limit" class="form-control">
                  <option>10</option>
                  <option>50</option>
                  <option>100</option>
                  <option>300</option>
                  <option>500</option>
              </select>
              &nbsp;&nbsp;&nbsp;
              <div class="edgexIconBtn">
                <i class="fa fa-search fa-lg fa-fw" aria-hidden="true" onclick="orgEdgexFoundry.supportNotification.searchNotificationBtn()"></i>
              </div>
            </form>
          </div>
        </div>

        <div class="panel-body" style="padding:0;">
          <div id="edgex-support-notification-list">
            <table class="table table-responsive table-hover table-striped">
              <thead>
                <tr class="active">
                  <!-- <th></th> -->
                  <th>#</th>
                  <th>ID</th>
                  <th>Slug</th>
                  <th>Sender</th>
                  <th>Category</th>
                  <th>Severity</th>
                  <th>Content</th>
                  <th>Status</th>
                  <th>Labels</th>
                  <th>Created Time</th>
                  <th>Modified Time</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
              <tfoot style="display:none;">
                <tr align="center">
                  <td colspan=13>No Data.</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- notification section end -->

    <!-- subscription section start -->
    <div id="edgex-foundry-support-subscription-main">
      <div id="edgex-foundry-support-subscription-list-main">
        <div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title">Subscription</h3>
          </div>
          <div class="panel panel-default" style="border:none;outline:none;margin:0;">
            <div class="panel-heading" style="padding:5px 2px;">
              <div class="edgexIconBtn">
                <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true" onclick="orgEdgexFoundry.supportNotification.addSubscriptionBtn()"></i>
              </div>
              <div class="edgexIconBtn">
                <i class="fa fa-refresh fa-lg fa-fw" aria-hidden="true" onclick="orgEdgexFoundry.supportNotification.refreshSubscriptionBtn()"></i>
              </div>
            </div>
          </div>

          <div class="panel-body" style="padding:0;">
            <!-- subscription list begin -->
            <div id="edgex-support-subscription-list">
              <table class="table table-responsive table-hover table-striped">
                <thead>
                  <tr class="active">
                    <th></th>
                    <th></th>
                    <th>#</th>
                    <th>ID</th>
                    <th>Slug</th>
                    <th>Receiver</th>
                    <th>Description</th>
                    <th>SubscribedCategories</th>
                    <th>SubscribedLabels</th>
                    <th>Channels</th>
                    <th>Created Time</th>
                    <th>Modified Time</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot style="display:none;">
                  <tr align="center">
                    <td colspan=13>No Data.</td>
                  </tr>
                </tfoot>
              </table>
            </div>
            <!-- subscription list end -->

            <!-- subscription channels begin -->
            <div class="edgex-support-subscription-channels-panel">
              <div class="panel panel-warning">
                <div class="panel-heading">
                  <h3 class="panel-title">
                    Channels
                    <button onclick="orgEdgexFoundry.supportNotification.hiddenChannelsBtn()" type="button" class="close pull-right" aria-label="Close"><span style="color:#333!important;" aria-hidden="true">&times;</span></button>
                  </h3>
                </div>
                <div class="panel-body" style="padding:0;">
                  <div class="edgex-support-subscription-channels-list">
                    <table class="table table-responsive table-hover table-striped">
                      <thead>
                        <tr class="active">
                          <th>Type</th>
                          <th>MailAddresses</th>
                          <th>URL</th>
                          <th>HttpMethod</th>
                        </tr>
                      </thead>
                      <tbody>
                      </tbody>
                      <tfoot style="display:none;">
                        <tr align="center">
                          <td colspan=13>No Data.</td>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- subscription chanels end -->
          </div>
        </div>
      </div>
      <!-- subscription edit begin -->
      <div class="edgex-support-subscription-edit">
        <div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title">Update or Add Subscription</h3>
          </div>
          <div class="panel panel-default" style="border:none;outline:none;margin:0;">
            <div class="panel-heading" style="padding:5px 2px;">
              <div class="edgexIconBtn add-subscription"  onclick="orgEdgexFoundry.supportNotification.commitSubscriptionBtn('add');">
                <i class="fa fa-check fa-lg" aria-hidden="true"></i>
              </div>
              <div class="edgexIconBtn update-subscription" style="display:none;" onclick="orgEdgexFoundry.supportNotification.commitSubscriptionBtn('update');">
                <i class="fa fa-check fa-lg" aria-hidden="true"></i>
              </div>
              <div class="edgexIconBtn" onclick="orgEdgexFoundry.supportNotification.cancelAddOrUpdateBtn()">
                <i class="fa fa-close fa-lg" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="panel-body" style="padding:0;">
            <form class="form-horizontal">
                <fieldset>
                    <legend>Subscription</legend>
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label for="slug" class="col-md-1 control-label">Slug</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" name="slug" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="receiver" class="col-md-1 control-label">Name</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" name="receiver" placeholder="subscriptionName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-md-1 control-label">Description</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" name="description" placeholder="subscriptionDescription">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="subscribedLabels" class="col-md-1 control-label">Labels</label>
                        <div class="col-md-10">
                            <select class="form-control selectpicker" multiple name="subscribedLabels">
                                <option selected value="metadata">metadata</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="subscribedCategories" class="col-md-1 control-label">Categories</label>
                        <div class="col-md-10">
                            <select class="form-control selectpicker" multiple name="subscribedCategories">
                                <option selected value="SECURITY">SECURITY</option>
                                <option value="HW_HEALTH">HW_HEALTH</option>
                                <option value="SW_HEALTH">SW_HEALTH</option>
                            </select>
                        </div>
                    </div>
                    <fieldset>
                        <legend>Channels</legend>
                        <div class="form-group">
                            <div class="col-md-2 col-md-offset-1">
                                <button type="button" class="btn btn-success btn-channel-add" title="New" onclick="orgEdgexFoundry.supportNotification.addNewSubscriptionChannelBtn()"><i class="fa fa-plus"></i> </button>
                                <button type="button" class="btn btn-success btn-channel-commit-add" title="Save" style="display: none" onclick="orgEdgexFoundry.supportNotification.commitSubscriptionChannelBtn('add')"><i class="fa fa-check"></i> </button>
                                <button type="button" class="btn btn-success btn-channel-commit-update" title="Save" style="display: none" onclick="orgEdgexFoundry.supportNotification.commitSubscriptionChannelBtn('update')"><i class="fa fa-check"></i> </button>
                                <button type="button" class="btn btn-success btn-channel-commit-delete" title="Save" style="display: none" onclick="orgEdgexFoundry.supportNotification.commitSubscriptionChannelBtn('delete')"><i class="fa fa-check"></i> </button>
                                <button type="button" class="btn btn-success btn-channel-cancel" title="Close" style="display: none" onclick="orgEdgexFoundry.supportNotification.cancelAddOrUpdateSubscriptionChannelBtn()"><i class="fa fa-close"></i> </button>
                            </div>
                        </div>
                        <div id="edgex-support-subscription-channel-tabel" class="form-group">
                            <div class="col-md-10 col-md-offset-1">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Email</th>
                                        <th>Url</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="edgex-support-subscription-channel-config" style="display: none">
                            <fieldset>
                                <legend>ChannelConfig</legend>
                                <div class="form-group">
                                    <label for="channelType" class="col-md-1 control-label">Type</label>
                                    <div class="col-md-10">
                                        <select class="form-control" name="channelType">
                                            <option value="REST">REST</option>
                                            <option selected value="EMAIL">EMAIL</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="edgex-support-subscription-email">
                                    <div class="form-group">
                                        <label for="channelEmail" class="col-md-1 control-label">Emails</label>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control" name="channelEmail"  placeholder="multiple email address,separated by comma (',')">
                                        </div>
                                    </div>
                                </div>
                                <div class="edgex-support-subscription-rest">
                                    <div class="form-group">
                                        <label for="channelRestUrl" class="col-md-1 control-label">Url</label>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" name="channelRestUrl" placeholder="callback endpoint url">
                                        </div>
                                        <label for="channelRestMethod" class="col-md-1 control-label">Method</label>
                                        <div class="col-md-3">
                                            <input type="text" class="form-control" value="POST" name="channelRestMethod" disabled>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </fieldset>
                </fieldset>
            </form>
          </div>
        </div>
      </div>
      <!-- subscription edit end-->
    </div>
    <!-- subscription section end -->

    <!-- transmission section start -->
    <div id="edgex-foundry-support-transmission">
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Transmission</h3>
        </div>
        <div class="panel panel-default" style="border:none;outline:none;margin:0;">
          <div class="panel-heading" style="padding:5px 2px;">
            <form class="form-inline">
              &nbsp;&nbsp; from &nbsp;<input name="transmission_start_time" type="text" class="form-control" >
              &nbsp;&nbsp; to &nbsp;<input name="transmission_end_time" type="text" class="form-control">
              &nbsp;&nbsp; limit&nbsp; <select name="transmission_limit" class="form-control">
                  <option>10</option>
                  <option>50</option>
                  <option>100</option>
                  <option>300</option>
                  <option>500</option>
              </select>
              &nbsp;&nbsp;&nbsp;
              <div class="edgexIconBtn">
                <i class="fa fa-search fa-lg fa-fw" aria-hidden="true" onclick="orgEdgexFoundry.supportNotification.seacrchTransmissionBtn()"></i>
              </div>
            </form>
          </div>
        </div>

        <div class="panel-body" style="padding:0;">
          <div id="edgex-support-transmission-list">
            <table class="table table-responsive table-hover table-striped">
              <thead>
                <tr class="active">
                  <th></th>
                  <th>#</th>
                  <th>ID</th>
                  <th>Notification</th>
                  <th>Status</th>
                  <th>ResendCount</th>
                  <th>Records</th>
                  <th>Created Time</th>
                  <th>Modified Time</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
              <tfoot style="display:none;">
                <tr align="center">
                  <td colspan=13>No Data.</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- transmission section end -->

  </body>
</html>
